<script setup lang="ts">
import { useFullscreen } from '../../../utils/useFullscreen';

const { isFullscreen, toggleFullscreen } = useFullscreen();
const props = defineProps({
  pageName: {
    type: String,
    default: '首页'
  }
})
</script>


<template>
  <a-row class="foot-view">
    <a-col :span="12" class="select-view">
      <a-space>
        <img src="../../../assets/pv-logo.png"/>
        <div class="full-btn" @click="toggleFullscreen">
          <img v-if="isFullscreen"  src="../../../assets/bi/icon-shrink.png"/>
          <icon-expand v-else/>
          <text>{{ isFullscreen ? '退出全屏' : '全屏' }}</text>
        </div>
      </a-space>
    </a-col>
    <a-col :span="12">
      <div class="version-view"> {{props.pageName}}</div>
    </a-col>
  </a-row>

</template>


<style scoped lang="less">
@font-size: 14px;
@font-size-mini: 12px;
@font-size-medium: 16px;
@font-size-large: 22px;
@font-size-title: 18px;
@color-w: white;
@font-family: Source Han Sans;

.foot-view {
  text-align: center;
  align-items: center;
  height: 100%;
  .select-view {
    text-align: start;
    padding-left: 32px;

    img {
      width: 30px;
      height: 30px;
    }
    .full-btn {
      display: flex;
      align-items: center;
      font-size: @font-size-medium;
      margin-left: 26px;
      text {
        margin-left: 5px;
        font-size: @font-size;
      }
      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
    }
  }
  .version-view {
    font-size: 15px;
    text-align: end;
    padding-right: 32px;
  }
}
</style>